<template>
  <el-dialog
      draggable
      v-model="MineVisible"
      title="修改我的信息"
      width="30%"
      style="padding-right: 60px;"
  >
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="60px"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请填写姓名"/>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="ruleForm.sex" placeholder="请选择性别">
          <el-option label="男" value="男"/>
          <el-option label="女" value="女"/>
        </el-select>
      </el-form-item>
      <el-form-item label="生日" prop="birth">
        <el-date-picker
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            v-model="ruleForm.birth"
            type="date"
            placeholder="请填写生日"
            :default-value="new Date(2000, 9, 1)"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input :autosize="{ minRows: 3, maxRows: 5 }"
                  type="textarea" v-model="ruleForm.remark" placeholder="请填写备注"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="large" @click="resetForm(ruleFormRef)">还原</el-button>
        <el-button size="large" type="primary" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {defineModel, onMounted} from 'vue'
import {reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import api from "@/api";
import {ElMessage} from "element-plus";

const ruleFormRef = ref<FormInstance>()
const MineVisible = defineModel('visible');
const user = ref({});
onMounted(() => {
  user.value = JSON.parse(localStorage.getItem("user"));
  ruleForm.id = user.value.id;
  ruleForm.name = user.value.name;
  ruleForm.sex = user.value.sex;
  ruleForm.birth = user.value.birth;
  ruleForm.remark = user.value.remark;
})

const checkName = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请填写姓名'))
  }
  callback();
}
const checkSex = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请填写性别'))
  }
  callback();
}
const checkBirth = (rule: any, value: any, callback: any) => {
  if (value === '') {
    return callback(new Error('请填写生日'))
  }
  callback()
}
const checkRemark = (rule: any, value: any, callback: any) => {
  callback()
}

const ruleForm = reactive({
  id: '',
  name: '',
  sex: '',
  birth: '',
  remark: '',
})

const rules = reactive<FormRules>({
  name: [{validator: checkName, trigger: 'blur', required: true}],
  sex: [{validator: checkSex, trigger: 'blur', required: true}],
  birth: [{validator: checkBirth, trigger: 'blur', required: true}],
  remark: [{validator: checkRemark, trigger: 'blur', required: false}],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  //@ts-ignore
  formEl.validate((valid) => {
    if (valid) {
      //@ts-ignore
      api.user.updateUser(ruleForm).then((res: any) => {
        ElMessage({message: res.message, type: res.success ? 'success' : 'error', grouping: true, showClose: true});
        api.user.findByIDUser(user.value.id).then((res: any) => {
          localStorage.setItem("user", JSON.stringify(res.data[0]));
        })
        MineVisible.value = false;
      })
    } else {
      ElMessage({message: '请完善表单！', type: 'error', grouping: true, showClose: true});
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>